<template>
	<view>
		<view class="nav" @click="changeSortType">
			<view class="navItem" >
				<view :class="{active: goodsParams.sort_type=== '1'}" data-type="1">
					综合排序
				</view>
			</view>
			<view class="navItem">
				<view :class="{active: goodsParams.sort_type=== '2'}"  data-type="2">
					销量优先
				</view>
			</view>
			<view class="navItem" >
				<view class="navSort"  :class="{active: sortShow }" data-type="3">
					<text data-type="3"> 价格</text>
					<view  data-type="3">
						<text class="iconfont icon-shangjiantou" data-type="3" :class="{iconFontActive: goodsParams.sort_type=== '3'}"></text>
						<text class="iconfont icon-xiajiantou" data-type="3" :class="{iconFontActive: goodsParams.sort_type=== '4'}"></text>
					</view>
				</view>
			</view>
			<view class="navItem layout">
				<u-icon @click="changeLayoutFunction" name="grid" v-show="changeLayout" color="#ccc" size="35" ></u-icon>
				<u-icon @click="changeLayoutFunction" name="list-dot" v-show="!changeLayout" color="#ccc" size="35"></u-icon>
			</view>
		</view>
		<view class="box" v-show="changeLayout">
			<view class="boxItem" v-for="goods in goodsList" :key="goods._id" @click="goDetail(goods)">
				<image :src="goods.img" mode="widthFix"></image>
				<view class="itemText">
					{{goods.name}}
				</view>
				<view class="itemPrice">
					<view class="price">
						<text>￥</text>
						<text>{{goods.price}}</text>
					</view>
					<view class="sales">
						已售 {{goods.sales}}
					</view>
				</view>
			</view>
		</view>
		<view class="box layout" v-show="!changeLayout">
			<view class="boxItem" v-for="goods in goodsList" :key="goods._id" @click="goDetail(goods)">
				<view class="itemImage">
					<image :src="goods.img"></image>
				</view>
				<view class="itemContainer">
					<view class="itemText">
						{{goods.name}}
					</view>
					<view class="itemPrice">
						<view class="price">
							<text>￥</text>
							<text>{{goods.price}}</text>
						</view>
						<view class="sales">
							已售 {{goods.sales}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<MyLoading v-model:lodingType="loadType"/>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom,
	} from "@dcloudio/uni-app"
	import { reactive, ref} from 'vue'
	import { home } from '@/api'
	import MyLoading from '@/components/MyLoading'
	
	
	// 切换布局
	let changeLayout = ref(false)
	
	function changeLayoutFunction() {
		changeLayout.value = !changeLayout.value
	}
	
	// 去往详情页
	function goDetail(like) {
		let { _id } = like
		uni.navigateTo({
			url: `/pages/goodsDetail/goodsDetail?goods=${_id}`
		})
	}
	
	// 加载状态
	let loadType = ref('more')
	// 商品列表
	let goodsList = ref([])
	// 商品列表参数 sort_type: 1 综合 2 
	let goodsParams = reactive({
		cate_id: '',
		is_top: '',
		skip: '0',
		limit: '10',
		sort_type: '1'
	})
	// 获取商品列表
	function getGoodsList(){
		goodsParams.skip = goodsList.value.length
		loadType.value = 'loading'
		home.reqGoodsList(goodsParams).then(res => {
			if(res.code === 1) {
				let data = goodsList.value
				data.push(...res.data)
				goodsList.value = data
				if(res.count <= goodsList.value.length) {
					loadType.value = 'loaded'
				}else {
					loadType.value = 'more'
				}
			}
		})
	}
	// 更改排序
	function changeSortType(e){
		let { type } = e.target.dataset
		if(!type) return
		goodsList.value = []
		if(type) {
			if(type === '3') {
				sortShow.value = true
				goodsParams.sort_type = goodsParams.sort_type === '3' ? '4':'3'
			}else {
				sortShow.value = false
				goodsParams.sort_type = type
			}
			getGoodsList()
		}
	}
	let sortShow = ref(false)
	// 到底触发
	onReachBottom(() => {
		if(loadType.value === 'loading' || loadType.value === 'loaded') return
		getGoodsList()
	})
	// 开始
	onLoad((options) => {
		let { cate_id, title, is_top } = options
		goodsParams.cate_id = cate_id
		goodsParams.is_top = is_top
		getGoodsList()
		uni.setNavigationBarTitle({
			title:`${title}`,
		})
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor:'#fff'
		})
	})
</script>

<style lang="scss">
	.nav{
		position: fixed;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-shadow: 0 0 5rpx #ccc;
		background-color: #fff;
		z-index: 999;
		.navItem{
			width: 33%;
			text-align: center;
			&>view{
				padding: 20rpx 1rpx;
			}
			.active{
				color: #fdd100;
				position: relative;
				&::after{
					content: '';
					position: absolute;
					top: 100%;
					left: 0;
					right: 0;
					background-color: #fdd100;
					height: 3rpx					
				}
			}
			&.layout{
				width: 15%;
			}
		}
		
		.navSort{
			@include flex1();
			view{
				display: flex;
				flex-direction: column;
				margin-left: 10rpx;
				line-height: 15rpx;
				.iconfont{
					font-size: 10rpx;
					color: #ccc;
					transform: scale(1.5,0.8);
					&.iconFontActive{
						color: #fdd100;
					}
				}
			}
		}
	}
	.box{
		padding: 100rpx 20rpx 20rpx 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.boxItem{
			width: 47%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			image{
				width: 100%;
			}
			.itemText{
				flex: 1;
				font-size: 40rpx;
				font-weight: 550;
			}
			.itemPrice{
				margin: 15rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				font-size: 35rpx;
				.price{
					color:  #fdd100;
					text:last-child{
						font-size: 45rpx;
					}
				}
				.sales{
					color: #ccc;
				}
			}
		}
		&.layout{
			flex-direction: column !important;
			.boxItem{
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: stretch;
				.itemContainer{
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-content: space-between;
				}
				.itemImage{
					width: 200rpx;
					margin: 15rpx;
				}
				image{
					width: 200rpx;
					height: 200rpx;
					vertical-align: middle;
				}
			}
		}
	}
	
	.footer{
		text-align: center;
		padding-bottom: 15rpx;
	}
</style>
